<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.el-tabs {
			height: 100%;
			background: #fff;
			padding-top: 20px;
		}
		.table {
			border: 1px solid #ccc;
			margin-top: 10px;
		}
		.option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20px 14px;
			font-size: 16px;
		}
		.addnew {
			border: 1px solid #333;
			padding: 3px 10px;
			border-radius: 6px;
		}
		.el-tabs__header {
			padding: 0 20px;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.topbox {
			display: flex;
			justify-content: flex-end;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</block>
<block name="content">
	<el-tabs v-model="activeTab" type="card">
		<el-tab-pane label="门店信息" name="shopinfo">
			<div class="option">
				<el-button @click="addShop" type="primary" size="small" icon="el-icon-circle-plus">新建门店</el-button>
				<div class="select">
					<el-select v-model="shopstatus" size="small">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" ><!-- -->
					<el-table-column prop="shopname" label="店铺">
						<template slot-scope="scope">
							<i class='el-icon-circle'></i>
							{{scope.row.store_name}}
						</template>
					</el-table-column>
					<el-table-column prop="manager_name" label="店长"></el-table-column>
					<el-table-column prop="mobile" label="联系方式"></el-table-column>
					<el-table-column prop="address" label="地址"></el-table-column>
					<el-table-column prop="partner" label="城市合伙人"></el-table-column>
					<el-table-column prop="status" label="状态"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toStoreDetail(scope.row.id)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</el-tab-pane>
		<el-tab-pane label="活动记录" name="recrod">
			<div class="topbox">
				<div class="block">
					<el-date-picker v-model="datevalue" type="date" placeholder="选择日期" size="small"></el-date-picker>
				</div>
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeActivityParam" v-model="activityParam.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
			</div>
			<div class="table">
				<el-table :data="activityTableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" >
					<el-table-column prop="name" label="活动名称"></el-table-column>
					<el-table-column prop="audit_name" label="审核员"></el-table-column>
					<el-table-column prop="audit_mobile" label="联系方式"></el-table-column>
					<el-table-column prop="company_ak" label="公司简称"></el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="store_count_info" label="实际/预期店铺"></el-table-column>
					<el-table-column prop="add_time" :formatter="dateFormat" label="创建时间"></el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 1">显示</span>
							<span v-if="scope.row.status == 0">隐藏</span>
						</template>
					</el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toActivityDetail(scope.row.id)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleActivitySizeChange"
							   @current-change="handleActivityCurrentChange" :page-size="activityParam.size" :total="activityTotal"></el-pagination>
			</div>
		</el-tab-pane>
	</el-tabs>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    id: '{$id}',
                    activeTab: "shopinfo",
                    datevalue: "",
                    searchinput: "",
                    searchrecord: "",
                    shopstatus: "",
                    recordList: [
                        {
                            projectname: "圣诞节促销",
                            name: "李先生",
                            phonenum: "13131313131",
                            shopnum: "13/10",
                            company: "哈哈哈哈",
                            charger: "Stefan",
                            createtime: "2019-04",
                            status: "进行中",
                            option: "查看"
                        },
                        {
                            projectname: "圣诞节促销",
                            name: "李先生",
                            phonenum: "13131313131",
                            shopnum: "13/10",
                            company: "哈哈哈哈",
                            charger: "Stefan",
                            createtime: "2019-04",
                            status: "进行中",
                            option: "查看"
                        }
                    ],
                    options: [
                        {
                            value: '选项1',
                            label: '活跃'
                        }, {
                            value: '选项2',
                            label: '繁忙'
                        }, {
                            value: '选项3',
                            label: '空闲'
                        }
                    ],
					// 门店列表
                    param:{
                        key: '',
                        audit_user_id: '{$id}',
                        page: 1,
                        size: 10,
                    },
                    total: 0,
                    tableData: [
                        {
                            shopname: "欧洲城店",
                            name: "李先生",
                            contact: "13131313131",
                            status: "活跃",
                            address: "深圳市南山区欧洲城一楼",
                            partner: "Jack",
                            option: "查看"
                        },
                        {
                            shopname: "欧洲城店",
                            name: "李先生",
                            contact: "13131313131",
                            status: "活跃",
                            address: "深圳市南山区欧洲城一楼",
                            option: "查看"
                        }
                    ],
					// 活动记录
                    activityParam:{
                        key: '',
                        audit_user_id: '{$id}',
                        page: 1,
                        size: 10,
                    },
                    activityTotal: 0,
                    activityTableData: [
                        {
                            shopname: "欧洲城店",
                            name: "李先生",
                            contact: "13131313131",
                            status: "活跃",
                            address: "深圳市南山区欧洲城一楼",
                            partner: "Jack",
                            option: "查看"
                        },
                        {
                            shopname: "欧洲城店",
                            name: "李先生",
                            contact: "13131313131",
                            status: "活跃",
                            address: "深圳市南山区欧洲城一楼",
                            option: "查看"
                        }
                    ],
                }
            },
            created: function () {
                this.getData();
                this.getActivityData();
            },
            methods: {
                // 店铺
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Audit/getStore', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                            console.log(_this.tableData)
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },

				// 活动记录
                getActivityData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Audit/getActivityData', _this.activityParam, function (data) {
                        if(data.status){
                            _this.activityTotal = parseInt(data.data.count);
                            _this.activityTableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleActivitySizeChange: function (size) {
                    this.activityParam.size = size;
                    this.getActivityData();
                },
                handleActivityCurrentChange: function (page) {
                    this.activityParam.page = page;
                    this.getActivityData();
                },
                changeActivityParam: function () {
                    this.activityParam.page = 1;
                    this.getActivityData();
                },


                toStoreDetail(id) {
                    window.location.href = HOME_URL+ "/orderAdmin/Store/detail?id=" + id;
                },
                toActivityDetail: function (id) {
                    window.location.href = HOME_URL+ "/orderAdmin/Activity/detail?id=" + id;
                },
                addShop() {
                    window.location.href = HOME_URL+ "/orderAdmin/Store/add?audit_user_id=" + this.id;
                },


                dateFormat(row, column, cellValue, index){
                    const daterc = row[column.property]
                    if(daterc!=null){
                        const dateMat= new Date(daterc * 1000);
                        const year = dateMat.getFullYear();
                        const month = dateMat.getMonth() + 1;
                        const day = dateMat.getDate();
                        const hh = dateMat.getHours();
                        const mm = dateMat.getMinutes();
                        const ss = dateMat.getSeconds();
                        const timeFormat= year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                        return timeFormat;
                    }
                }
            }
        });
	</script>
</block>